<template>
  <div style="width: 100%;height:100%;position:relative">
    <vertical-scroll ref="verticalScroll" :onEndReachedThreshold="5" @scrollBottom="loadMore" @savePos="savePos">
      <!--<div style="height:6.1rem ;width: 100%">-->
      <!--</div>-->
      <ul style="width: 100%;padding-right: 0.7rem">
        <new-classify-list
          :key="item.goodscode"
          v-for="(item ,index) in goodsList"
          :isLastItem="index + 1  == goodsList.length"
          :comInfor="translateDetailData(item)">
        </new-classify-list>
        <li v-show="goodsList.length == 0 && !isOnLoading " class="centent">
          <div class="no_data">
            <img src="static/image/no_order.png">
            <p>暂无相关数据</p>
          </div>
        </li>

        <li v-show="totalPageCount > pageNum && goodsList.length > 0"
            style="color:#9a9a9a ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ; background:white;font-weight: 600">
          <LoadMoreAnimate></LoadMoreAnimate>
          加载更多
        </li>
        <li v-show="totalPageCount <= pageNum && goodsList.length > 0 && !isOnLoading"
            style="padding: 0.3rem 0 0.5rem;border-top:1px solid rgb(245,245,245);color: rgb(154,154,154)">
          更多商品 敬请期待
        </li>
        <li style="height:3rem;">

        </li>
      </ul>
    </vertical-scroll>
    <button-to-top @goTop="goTop"></button-to-top>
  </div>
</template>

<script>
  import {queryNewGoodsList} from '@/utils/ReturnAxios';
  import NewClassifyList from '../../NewClassifyList';
  import {translateDetailData} from '@/utils/TranslateDetailDate';
  import VerticalScroll from '@/real-components/VerticalScroll';
  import LoadMoreAnimate from '@/real-components/LoadMoreAnimate';
  import {showLoading, hideLoading} from '@/utils/loading';
  import ButtonToTop from "@/real-components/ButtonToTopForTest";
  import axios from "axios";


  export default {
    data() {
      return {
        goodsList: [],
        pageNum: 1,
        pageSize: 8,
        totalCount: 0,
        totalPageCount: 0,
        isOnLoading: true,
        elements: null
      }
    },
    components: {NewClassifyList, VerticalScroll, LoadMoreAnimate, ButtonToTop},
    props: {
      thrClassInfo: {
        type: Object,
        default: () => ({}),
      },
      orderConfig: {
        type: Object,
      }
    },
    methods: {
      goTop() {
        this.$refs.verticalScroll.goTop()
      },
      translateDetailData,
      savePos(data) {
      },
      //初始化state中的数据
      async initData() {
        this.pageNum = 1
      },

      // 获取首次上商品数据
      async getGoodsListInfoFirst() {
        if (!this.thrClassInfo) {
          return
        }
        var isReturn = this.$store.state.cjy.isReturn;
        var {goodsClassCode} = this.thrClassInfo
        var {classCode} = this.thrClassInfo
        var {orderDirection, orderType} = this.orderConfig
        var goodsListInfo
        this.isOnLoading = true
        this.goodsList = []
        this.showLoading()
        if (isReturn) {
          //查找本地数据
          goodsListInfo = await localforage.getItem(classCode)
        }
        //如果本地数据不存在 或者  排序方式有变化那么就去服务器申请数据
        if (!goodsListInfo) {
          goodsListInfo = await  this.queryFoodsList(classCode)
        }
        this.goodsList = goodsListInfo.results
        //将数据存入需要渲染的列表
        this.changeData(goodsListInfo)
        this.isOnLoading = false
        this.hideLoading()
        localforage.setItem('classCode', classCode)
        //存储数据到本地
        localforage.setItem(classCode, Object.assign({}, goodsListInfo, {orderDirection, orderType}))
      },

      //加载更多数据
      async loadMore() {

        if (this.totalPageCount < this.pageNum || this.isOnLoading || this.totalPageCount == this.pageNum) {
          return
        }

        this.isOnLoading = true
        this.pageNum = this.pageNum + 1
        if (!this.thrClassInfo) {
          return
        }
        var {classCode} = this.thrClassInfo
        var {orderDirection, orderType} = this.orderConfig
        var goodsListInfo
        goodsListInfo = await this.queryFoodsList(classCode)
        //将数据存入需要渲染的列表
        this.goodsList.push(...goodsListInfo.results)
        goodsListInfo.results = this.goodsList
        this.changeData(goodsListInfo)
        this.isOnLoading = false
        //存储数据到本地
        localforage.setItem(classCode, Object.assign({}, goodsListInfo, {orderDirection, orderType}))
        this.$nextTick(() => {
          this.$refs.verticalScroll.refresh()
        })

      },

      //发送请求获取商品数据
      async queryGoodsList(goodsClassCode) {
        var config = {
          classCodeSearch: goodsClassCode,
          isPage: true,
          pageNum: this.pageNum,
          length: this.pageSize,
          [this.orderConfig.orderType]: this.orderConfig.orderDirection,
        }

        var res = await queryNewGoodsList(config);
        res = res.data
        if (res.returnCode == 0) {
          return null
        }
        var goodsListInfo = res.data[0]
        return goodsListInfo
      },

      //发送请求获取餐品数据
      async queryFoodsList(classCode){
        let url = window.api.goods_host+'/mallGoods/queryDishesGoodsListByGoodsClass';
        let sessionId = localStorage.getItem('sessionId');
        let config = {
          url,
          method: "post",
          headers: {sessionId,'Content-Type':'application/json', 'Accept' : 'application/json'},
          data:{
            classCodeSearch: classCode,
            isPage: true,
            pageNum: this.pageNum,
            length: this.pageSize,
            [this.orderConfig.orderType]: this.orderConfig.orderDirection,
            enterpriseid:window.api.enterpriseid,
            enterpriseCode:window.api.enterpriseCode,
            storeCode:window.api.storeCode,
            usePlatform :'dine'
          },
          
        }

        let results
        await axios(config).then(res=>{
          if(res.status==200&&res.data.returnCode==1){
              console.log(res.data.data[0].results,'resdata')
              results = res.data.data[0];
          }
        })

        return results
      },

      //改变数据
      changeData(goodsListInfo) {
        this.totalCount = goodsListInfo.totalCount
        this.totalPageCount = goodsListInfo.totalPageCount
        this.pageNum = goodsListInfo.pageNo
        this.$emit('changeTotalCount', this.totalCount)
      },
      showLoading() {
        setTimeout(() => {
          showLoading()
        })
        this.setTimeOut = setTimeout(() => {
          hideLoading()
        }, 3000)
      },
      hideLoading() {
        hideLoading()
        this.setTimeOut && clearTimeout(this.setTimeOut)
      }
    },
    watch: {
      orderConfig() {
        this.pageNum = 1
        this.getGoodsListInfoFirst()
        this.goTop()
      },
    },
    created() {
      this.goodsClassCode = this.thrClassInfo.goodsClassCode
    },
    beforeDestroy() {
      this.hideLoading()
    },
    mounted() {
      this.getGoodsListInfoFirst()
      this.elements = this.$refs.scrollOuter
    }
  }
</script>

<style>

</style>
